<template>
  <el-card class="executive-health-container">
    <div class="header">
      <div class="title">{{ t("home.executiveHealth.title") }}</div>
    </div>

    <div class="charts-container">
      <!-- 左侧：健康分类占比饼状图 -->
      <div class="chart-section left-chart">
        <div class="chart-title">
          {{ t("home.executiveHealth.healthCategory.title") }}
          <el-icon class="title-icon">
            <Warning />
          </el-icon>
        </div>
        <div class="chart-wrapper">
          <div ref="pieChartRef" class="chart-canvas" />
          <div class="center-circle">
            <div class="center-content" />
          </div>
        </div>
      </div>

      <!-- 右侧：健康标注分布柱状图 -->
      <div class="chart-section right-chart">
        <div class="chart-title">
          {{ t("home.executiveHealth.healthTag.title") }}
          <el-icon class="title-icon">
            <Warning />
          </el-icon>
        </div>
        <div class="chart-wrapper">
          <div ref="barChartRef" class="chart-canvas" />
        </div>
      </div>
    </div>

    <!-- 弹出对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="userListTitle || dialogTitle"
      width="500px"
      :show-close="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      center
    >
      <div class="dialog-content">
        <!-- 用户列表展示 -->
        <div v-if="userListData.length > 0" class="user-list">
          <div
            v-for="user in userListData"
            :key="user.userId"
            class="user-item"
            @click="handleUserClick(user)"
          >
            <div class="user-info">
              <span class="user-name">{{ user.userName }}</span>
              <span class="user-id">ID: {{ user.userId }}</span>
            </div>
            <el-icon class="arrow-icon">
              <ArrowRight />
            </el-icon>
          </div>
        </div>

        <!-- 原始内容展示（兜底） -->
        <div v-else class="original-content">
          <div class="info-item">
            <span class="label">{{ dialogContent.label }}：</span>
            <span class="value">{{ dialogContent.value }}</span>
          </div>
          <div v-if="dialogContent.percent" class="info-item">
            <span class="label">占比：</span>
            <span class="value">{{ dialogContent.percent }}%</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import type {
  HomeHealthCategoryVO,
  HomeHealthTagVO,
  usename
} from "@/api/home1";
import { homeApi } from "@/api/home1";
import { ArrowRight, Warning } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { useI18n } from "vue-i18n";

// 国际化
const { t } = useI18n();

// 图表引用
const pieChartRef = ref<HTMLElement>();
const barChartRef = ref<HTMLElement>();
let pieChart: echarts.ECharts | null = null;
let barChart: echarts.ECharts | null = null;

// 弹窗状态
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogContent = ref<{
  label: string;
  value: string | number;
  percent?: number;
}>({
  label: "",
  value: ""
});

// 用户详情列表状态
const userListVisible = ref(false);
const userListData = ref<usename[]>([]);
const userListTitle = ref("");

// 数据状态
const healthCategoryData = ref<HomeHealthCategoryVO[]>([]);
const healthTagData = ref<HomeHealthTagVO[]>([]);

// 获取健康分类数据
const fetchHealthCategoryData = async () => {
  try {
    console.log("开始获取健康分类数据...");
    const response = await homeApi.getHealthCategorySummary();
    console.log("健康分类数据获取成功:", response);

    if (response.data && response.data) {
      healthCategoryData.value = response.data;
      await nextTick();
      initPieChart();
    }
  } catch (error) {
    console.error("获取健康分类数据失败：", error);
  }
};

// 获取健康标签数据
const fetchHealthTagData = async () => {
  try {
    console.log("开始获取健康标签数据...");
    const response = await homeApi.getHealthTagSummary();
    console.log("健康标签数据获取成功:", response);

    if (response.data && response.data) {
      healthTagData.value = response.data;
      console.log("healthTagData.value:", healthTagData.value);
      await nextTick();
      initBarChart();
    }
  } catch (error) {
    console.error("获取健康标签数据失败：", error);
  }
};

// 获取健康分类详情
const fetchHealthCategoryDetail = async (
  healthCategoryId: number,
  categoryName: string
) => {
  try {
    console.log("获取健康分类详情:", { healthCategoryId, categoryName });
    const response = await homeApi.getHealthCategoryDetail({
      healthCategoryId
    });
    console.log("健康分类详情获取成功:", response);

    if (response.data && response.data) {
      userListData.value = response.data;
      userListTitle.value = `${t("home.executiveHealth.dialog.categoryTitle")} - ${categoryName}`;
      dialogVisible.value = true;
    }
  } catch (error) {
    console.error("获取健康分类详情失败：", error);
  }
};

// 获取健康标签详情
const fetchHealthTagDetail = async (
  healthTagId: number,
  archiveTime: string,
  displayName: string
) => {
  try {
    console.log("获取健康标签详情:", { healthTagId, archiveTime, displayName });
    const response = await homeApi.getHealthTagDetail({
      healthTagId,
      archiveTime
    });
    console.log("健康标签详情获取成功:", response);

    if (response.data && response.data) {
      userListData.value = response.data;
      userListTitle.value = `${displayName} - ${t("home.executiveHealth.dialog.tagTitle")}`;
      dialogVisible.value = true;
    }
  } catch (error) {
    console.error("获取健康标签详情失败：", error);
  }
};

// 处理用户点击跳转
const handleUserClick = (user: usename) => {
  console.log("点击用户进行跳转:", user);

  // 这里可以根据业务需求实现跳转逻辑
  // 例如：跳转到用户详情页面
  // router.push(`/user/${user.userId}`)

  // 临时提示功能，实际项目中可替换为具体跳转逻辑
  alert(`即将跳转到用户：${user.userName} (ID: ${user.userId}) 的详情页面`);

  // 可以关闭弹窗
  dialogVisible.value = false;
};

// 初始化饼状图
const initPieChart = () => {
  if (!pieChartRef.value) return;

  pieChart = echarts.init(pieChartRef.value);

  // 确保数据是数组格式
  const categoryData = Array.isArray(healthCategoryData.value)
    ? healthCategoryData.value
    : (healthCategoryData.value as any)?.data || [];

  const pieData = categoryData.map((item: any, index) => ({
    name: item.healthCategoryName || "未知",
    value: item.count || 0,
    percent: item.percent || 0,
    itemStyle: {
      color: getPieColor(index)
    }
  }));

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "vertical",
      right: "30px",
      top: "top",
      icon: "circle",
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20,
      textStyle: {
        fontSize: 14,
        color: "#333333",
        padding: [0, 0, 0, 10]
      },
      formatter: function (name) {
        // 查找对应数据项的百分比
        const dataItem = pieData.find(item => item.name === name);
        const percent = dataItem ? Math.round(dataItem.percent || 0) : 0;
        return `${name} | ${percent}%`;
      },
      data: pieData.map(item => ({
        name: item.name,
        itemStyle: {
          color: getPieColor(item.name)
        }
      }))
    },
    series: [
      {
        name: "健康分类",
        type: "pie",
        radius: "70%", // 实心扇形，不是圆环
        center: ["35%", "50%"],
        data: pieData,
        itemStyle: {
          borderWidth: 3, // 扇区间隙3px
          borderColor: "#ffffff" // 间隙颜色为白色
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 4,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: false // 不显示标签
        },
        labelLine: {
          show: false // 不显示引导线
        }
      }
    ]
  };

  pieChart.setOption(option);

  // 点击事件处理
  pieChart.on("click", (params: any) => {
    console.log("饼状图点击事件:", params);

    // 查找对应的健康分类数据
    const categoryData = Array.isArray(healthCategoryData.value)
      ? healthCategoryData.value
      : (healthCategoryData.value as any)?.data || [];

    const clickedItem = categoryData.find(
      (item: any) => item.healthCategoryName === params.name
    );

    if (clickedItem?.healthCategoryId) {
      fetchHealthCategoryDetail(clickedItem.healthCategoryId, params.name);
    } else {
      console.warn("未找到健康分类ID:", params.name);
    }
  });
};

// 初始化柱状图
const initBarChart = () => {
  if (!barChartRef.value) return;

  barChart = echarts.init(barChartRef.value);

  // 处理柱状图数据 - 将所有月份的标签数据展平
  console.log("开始处理柱状图数据，healthTagData:", healthTagData.value);

  // 确保数据是数组格式
  const tagData = Array.isArray(healthTagData.value)
    ? healthTagData.value
    : (healthTagData.value as any)?.data || [];

  // 动态收集所有健康标签名称
  const categorySet = new Set<string>();
  tagData.forEach((monthData: any) => {
    monthData.tagList?.forEach(tag => {
      if (tag.healthTagName) {
        categorySet.add(tag.healthTagName);
      }
    });
  });

  const categories = Array.from(categorySet).sort(); // 转为数组并排序
  console.log("动态生成的categories:", categories);

  // 动态生成渐变颜色数组
  const gradientColors = [
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#60FFE5" },
        { offset: 1, color: "rgba(154,255,244,0.3)" }
      ]
    },
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#927FFF" },
        { offset: 1, color: "rgba(118,113,255,0.16)" }
      ]
    },
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#85CDFF" },
        { offset: 1, color: "rgba(34,168,255,0.16)" }
      ]
    }
  ];

  // 为每个类别分配渐变颜色
  const colors = categories.map(
    (_, index) => gradientColors[index % gradientColors.length] as any
  );

  console.log(
    "为categories分配了渐变颜色，总共",
    gradientColors.length,
    "种渐变样式"
  );
  console.log("图例设置为右上角位置，字体12px，颜色#666666");
  console.log("Y轴网格线设置为虚线样式，图例与图表间距30px");
  console.log("图表标题样式更新：左对齐、添加下边框、添加问号图标");
  console.log("交互功能：点击柱子调用getHealthTagDetail接口");

  const barData: {
    name: string;
    value: number;
    month: string;
    color: string;
  }[] = [];

  tagData.forEach((monthData: any) => {
    const month = monthData.archiveTime?.split("-")[1] || "";
    console.log("处理月份数据:", month, monthData);

    monthData.tagList?.forEach(tag => {
      console.log("%c tag:", "color: #0077ff; font-weight: bold;", tag);
      if (tag.healthTagName) {
        const categoryIndex = categories.indexOf(tag.healthTagName);
        if (categoryIndex !== -1) {
          barData.push({
            name: `${categories[categoryIndex]}-${month}`,
            value: tag.count || 0,
            month: month,
            color: colors[categoryIndex]
          });
        }
      }
    });
  });

  console.log("生成的柱状图数据:", barData);

  // 按月份分组数据
  const months = [...new Set(barData.map(item => item.month))].sort();

  const seriesData = categories.map((category, index) => ({
    name: category,
    type: "bar",
    barWidth: 16, // 柱子宽度设置为16px
    data: months.map(month => {
      const item = barData.find(d => d.name === `${category}-${month}`);
      return item ? item.value : 0;
    }),
    itemStyle: {
      color: colors[index],
      borderRadius: [8, 8, 0, 0] // 顶端圆弧，圆角半径为8px（宽度的一半）
    }
  }));

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      data: categories,
      right: "20px",
      top: "10px",
      textStyle: {
        fontSize: 12,
        color: "#666666"
      },
      itemGap: 15
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "60px", // 图例高度 + 30px间距
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: months,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: t("home.executiveHealth.healthTag.distribution"),
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed", // 虚线样式
            color: "#E8E8E8",
            width: 1
          }
        }
      }
    ],
    series: seriesData
  };

  barChart.setOption(option);

  // 点击事件处理
  barChart.on("click", (params: any) => {
    console.log("柱状图点击事件:", params);
    const clickedCategory = categories[params.seriesIndex] || params.seriesName;
    const clickedMonth = months[params.dataIndex];
    const clickedValue = params.value;

    console.log("点击的标签信息:", {
      clickedCategory,
      clickedMonth,
      clickedValue
    });

    // 查找对应的健康标签数据
    const tagData = Array.isArray(healthTagData.value)
      ? healthTagData.value
      : (healthTagData.value as any)?.data || [];

    // 查找对应月份和标签的详细信息
    const monthData = tagData.find((item: any) =>
      item.archiveTime?.includes(clickedMonth)
    );

    const tagDetail = monthData?.tagList?.find(
      (tag: any) => tag.healthTagName === clickedCategory
    );

    if (tagDetail?.healthTagId && monthData?.archiveTime) {
      fetchHealthTagDetail(
        tagDetail.healthTagId,
        monthData.archiveTime,
        `${clickedCategory} (${clickedMonth}月)`
      );
    } else {
      console.warn("未找到健康标签ID或时间:", {
        clickedCategory,
        clickedMonth
      });
    }
  });
};

// 获取饼状图径向渐变颜色
const getPieColor = (index?: number): any => {
  const gradientColorMap: { [key: string]: any } = [
    // 1. 健康人群 - 绿色系（表示健康状态良好）
    {
      type: "radial",
      x: (pieChartRef.value?.getBoundingClientRect().width || 0) / 2,
      y: (pieChartRef.value?.getBoundingClientRect().height || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#A8E6CF" }, // 浅绿色中心
        { offset: 1, color: "#4CAF50" } // 深绿色外圈
      ]
    },

    // 2. 亚健康人群 - 浅蓝色系（表示需要关注但不严重）
    {
      type: "radial",
      x: (pieChartRef.value?.getBoundingClientRect().width || 0) / 2,
      y: (pieChartRef.value?.getBoundingClientRect().height || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#B3E5FC" }, // 浅蓝色中心
        { offset: 1, color: "#2196F3" } // 蓝色外圈
      ]
    },

    // 3. 慢性病人群 - 黄色系（表示需要长期关注）
    {
      type: "radial",
      x: (pieChartRef.value?.getBoundingClientRect().width || 0) / 2,
      y: (pieChartRef.value?.getBoundingClientRect().height || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#FFF59D" }, // 浅黄色中心
        { offset: 1, color: "#FFC107" } // 黄色外圈
      ]
    },

    // 4. 慢性病稳定 - 黄绿色系（表示慢性病但状态稳定）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#DCEDC1" }, // 浅黄绿色中心
        { offset: 1, color: "#8BC34A" } // 黄绿色外圈
      ]
    },

    // 5. 慢性病稳定期患者 - 黄绿色系（与慢性病稳定类似）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#C8E6C9" }, // 浅绿黄色中心
        { offset: 1, color: "#7CB342" } // 绿黄色外圈
      ]
    },

    // 6. 院外恢复期人群 - 青色系（表示恢复中状态）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#B2EBF2" }, // 浅青色中心
        { offset: 1, color: "#00BCD4" } // 青色外圈
      ]
    },

    // 7. 院外康复期人群 - 青蓝色系（表示康复中状态）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#B3E0FF" }, // 浅青蓝色中心
        { offset: 1, color: "#03A9F4" } // 青蓝色外圈
      ]
    },

    // 8. 门诊就医人群 - 橙色系（表示需要医疗关注）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#FFE0B2" }, // 浅橙色中心
        { offset: 1, color: "#FF9800" } // 橙色外圈
      ]
    },

    // 9. 急诊就医人群 - 红橙色系（表示紧急医疗状态）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#FFCDD2" }, // 浅红橙色中心
        { offset: 1, color: "#FF5722" } // 红橙色外圈
      ]
    },

    // 10. 住院就医人群 - 红色系（表示严重需要住院治疗）
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#FFCDD2" }, // 浅红色中心
        { offset: 1, color: "#F44336" } // 红色外圈
      ]
    },

    // 兼容性：保留原有的"需重点关注"分类
    {
      type: "radial",
      x: (pieChartRef.value?.offsetWidth || 0) / 2,
      y: (pieChartRef.value?.offsetHeight || 0) / 2,
      r: 150,
      global: true,
      colorStops: [
        { offset: 0, color: "#E1BEE7" }, // 浅紫色中心
        { offset: 1, color: "#9C27B0" } // 紫色外圈
      ]
    }
  ];

  // 重新实现分类颜色匹配逻辑，避免“亚健康人群”与“健康人群”因字符串包含关系导致颜色混淆
  if (index) {
    // 先尝试精确匹配
    if (gradientColorMap[index]) {
      return gradientColorMap[index];
    }
  }

  return gradientColorMap[0];

  // 默认径向渐变颜色
  // return {
  //   type: "radial",
  //   x: 0.5,
  //   y: 0.5,
  //   r: 0.5,
  //   colorStops: [
  //     { offset: 0, color: "rgba(140,140,140,0.3)" }, // 中心浅色
  //     { offset: 1, color: "#8C8C8C" } // 外圈深色
  //   ]
  // };
};

// 响应式处理
const handleResize = () => {
  pieChart?.resize();
  barChart?.resize();
};

// 组件挂载时初始化
onMounted(async () => {
  console.log("高管健康概况组件挂载，开始获取数据...");

  // 并行获取数据
  await Promise.all([fetchHealthCategoryData(), fetchHealthTagData()]);

  // 监听窗口大小变化
  window.addEventListener("resize", handleResize);
});

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  pieChart?.dispose();
  barChart?.dispose();
});
</script>

<style lang="scss" scoped>
.executive-health-container {
  border-radius: 16px !important;
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 16px 0;
  }

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 16px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      position: relative;
      padding-left: 12px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: linear-gradient(270deg, #61fffb 0%, #65c8ff 100%);
        box-shadow: 0px 2px 16px 0px rgba(41, 127, 128, 0.06);
        border-radius: 2px;
      }
    }
  }

  .charts-container {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    height: 400px;

    .chart-section {
      flex: 1;
      border: 1px solid #e8e8e8;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      padding: 16px;

      .chart-title {
        font-size: 14px;
        font-weight: bold;
        color: #222222;
        margin-bottom: 16px;
        text-align: left;
        display: flex;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #e8e8e8;

        .title-icon {
          margin-left: 6px;
          color: #999999;
          font-size: 14px;
          cursor: help;
        }
      }

      .chart-wrapper {
        height: calc(100% - 32px);

        .chart-canvas {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .dialog-content {
    .user-list {
      .user-count-info {
        margin-bottom: 16px;
        padding: 8px 12px;
        background-color: #f5f5f5;
        border-radius: 6px;
        font-size: 14px;
        color: #666;
        text-align: center;
      }

      .user-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        margin-bottom: 8px;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background-color: #f9f9f9;
          border-color: var(--el-color-primary);
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .user-info {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .user-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            line-height: 1.2;
          }

          .user-id {
            font-size: 12px;
            color: #999;
            line-height: 1.2;
          }
        }

        .arrow-icon {
          color: #ccc;
          font-size: 16px;
          transition: color 0.3s ease;
        }

        &:hover .arrow-icon {
          color: var(--el-color-primary);
        }
      }
    }

    .original-content {
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .label {
          font-weight: 500;
          color: #666;
        }

        .value {
          font-weight: bold;
          color: #333;
        }
      }
    }
  }
  // 中心圆形渐变装饰
  .center-circle {
    position: absolute;
    top: 58%;
    left: 37%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;

    // 径向渐变背景：从中心白色透明向外扩散到完全透明
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.3) 40%,
      rgba(255, 255, 255, 0.1) 70%,
      rgba(255, 255, 255, 0) 100%
    );

    // 简化光晕效果，保持纯净
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.2),
      inset 0 0 20px rgba(255, 255, 255, 0.1);

    // 确保在图表之上
    z-index: 10;
    pointer-events: none;

    .center-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ffffff;

      .center-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 4px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        letter-spacing: 1px;
      }

      .center-subtitle {
        font-size: 12px;
        opacity: 0.9;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
